<template>
  <div class="data_count">
    <Head title="数据统计"/>
    <div class="container">
      <div class="data_count_head">
        <div
          :class="inds==index?'data_count_head_list data_count_head_list_act':'data_count_head_list'"
          v-for="(item,index) in nav"
          @click="setNav(index)"
        >{{item}}</div>
        <div class="red_border"></div>
      </div>

      <!-- 统计列表 -->
      <div class="count_list">
        <div class="count_list_head">商品统计</div>
        <div class="count_list_con">
          <div class="count_list_con_list" v-for="(item,index) in count1">
            <div class="count_list_con_list_box">
              <div class="count_list_con_list_box_">
                <div class="count_list_con_list_box_img">
                  <img :src="item.img" alt>
                </div>
                <div class="count_list_con_list_box_name">{{item.name}}</div>
                <div class="count_list_con_list_box_num">{{item.number}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计列表end -->
      <!-- 统计列表 -->
      <div class="count_list">
        <div class="count_list_head">商品统计</div>
        <div class="count_list_con">
          <div class="count_list_con_list" v-for="(item,index) in count2">
            <div class="count_list_con_list_box">
              <div class="count_list_con_list_box_">
                <div class="count_list_con_list_box_img">
                  <img :src="item.img" alt>
                </div>
                <div class="count_list_con_list_box_name">{{item.name}}</div>
                <div class="count_list_con_list_box_num">{{item.number}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计列表end -->
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
export default {
  data() {
    return {
      nav: ["昨日", "7天内", "30天内"],
      inds: 0,
      count1: [
        {
          img: require("../../../static/image/icon_tongji1.png"),
          name: "在售中",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji2.png"),
          name: "已下架",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji3.png"),
          name: "收藏量",
          number: 0
        }
      ],
      count2: [
        {
          img: require("../../../static/image/icon_tongji4.png"),
          name: "待付款",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji5.png"),
          name: "待发货",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji6.png"),
          name: "待收货",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji7.png"),
          name: "已收货",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji8.png"),
          name: "待退款",
          number: 0
        },
        {
          img: require("../../../static/image/icon_tongji9.png"),
          name: "已退款",
          number: 0
        }
      ]
    };
  },
  components: {
    Head
  },
  mounted() {
    this.get_statistical_data();
  },
  methods: {
    // 获取统计数据
    get_statistical_data() {
      this.appJS.ajax(
        "user.get_statistical_data",
        "post",
        {
          store_id: this.appJS.getStorage("store_info").store_id,
          limit_time: this.inds == 0 ? "1" : this.inds == 1 ? "2" : "3"
        },
        res => {
          console.log(res.data);
          this.count1[0].number = res.data.goods_for_sale_count;
          this.count1[1].number = res.data.goods_not_for_sale_count;
          this.count1[2].number = res.data.goods_collection;
          this.count2[0].number = res.data.order_wait_for_pay_count;
          this.count2[1].number = res.data.order_wait_for_send_count;
          this.count2[2].number = res.data.order_wait_for_receiv_count;
          this.count2[3].number = res.data.order_received_count;
          this.count2[4].number = res.data.order_wait_for_refund_count;
          this.count2[5].number = res.data.order_fefuned_count;
        },this
      );
    },
    setNav(index) {
      this.inds = index;
      document.getElementsByClassName("red_border")[0].style.left =
        33.3333 * index + (33.3333 - 5) / 2 + "vw";
        this.get_statistical_data()
    },
    goodsAdmin(index) {
      switch (index) {
        case 0:
          this.$router.push({ path: "/goodsAdmin", query: { inds: 0 } });
          break;
        case 1:
          this.$router.push({ path: "/goodsAdmin", query: { inds: 1 } });
          break;
      }
    }
  }
};
</script>

<style scoped lang='less'>
@co: rgb(236, 79, 70);
.data_count_head {
  height: 3.5rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: @color;
  position: relative;
  .data_count_head_list {
    height: 100%;
    flex: 1;
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .red_border {
    position: absolute;
    height: 6px;
    width: 5vw;
    background: @co;
    border-radius: 100px;
    bottom: 0;
    left: 14.1665vw;
    transition: 0.4s;
  }
  .data_count_head_list_act {
    color: @co;
  }
}
.count_list {
  padding: 0.5rem 0;
  .count_list_head {
    height: 2.5rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-weight: bold;
    padding-left: 1rem;
  }
  .count_list_con {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.5rem;
    flex-wrap: wrap;
    .count_list_con_list {
      height: 33vw;
      width: 33.3333%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0.5rem;
      .count_list_con_list_box {
        width: 30vw;
        height: 30vw;
        background: #fff;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
        &:active {
          background: #efefef;
        }
        .count_list_con_list_box_ {
          width: 90%;
          .count_list_con_list_box_img {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              height: 2.5rem;
              width: 2.5rem;
            }
          }
          .count_list_con_list_box_name {
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 0.3rem;
          }
          .count_list_con_list_box_num {
            font-size: 0.9rem;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
